{include file="public/adminhead"}

<div class="container-fluid" id="special">
  <div class="row">
    <div class="card">
      <div class="card-header bg-danger">
        <h4><span style="font-weight: 700">将</span>{$res.title}</h4>
        <ul class="card-actions">
          <li>
            <button type="button"><i class="mdi mdi-more"></i></button>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <p>加入到以下专题(选择并提交保存)...</p>
        <div v-if="loading==true" style="display:flex;align-items: center;justify-content: center;width: 100%; text-align: center; min-height: 300px">
          <i class="mdi mdi-36px mdi-spin mdi-loading"></i>页面加载中...
        </div>

        <div v-if="loading!=true" class="table-responsive">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th>#</th>
              <th>专题名称</th>
              <th>创建时间</th>
              <th>点击</th>
              <th>加入</th>

            </tr>
            </thead>
            <tbody>
            <tr v-for="(v,i) in list">
              <th scope="row">{{v.id}}</th>
              <td>{{v.title}}</td>
              <td>{{v.add_time}}</td>
              <td>{{v.hits}}</td>
              <td><button @click="SetPid(v)" class="btn btn-sm btn-primary">加入我</button></td>
            </tr>

            </tbody>
          </table>
          <nav>
            <ul class="pager">
              <li><a href="javascript:;" @click="prev()">上一页</a></li>
              <li><a href="javascript:;" @click="next()">下一页</a></li>
            </ul>
          </nav>
        </div>

        <div>
          待加入的专题：{{specialTicle}}
        </div>
        <br>

        <button @click="save()" class="btn btn-w-xl btn-primary">提交保存</button>
      </div>
    </div>
  </div>

</div>

{include file="public/afooter"}

<script>
    var s = new Vue({
        el: '#special',
        data: {
            loading:true,
            list:[],
            page:1,
            pid:0,
            specialTicle:'请选择'//要加入的专题名称
            ,id:"{$res.id}"
        }
        ,methods: {
            prev:function () {
                if(this.page == 1){
                    error("已经是第一页了");
                    return false;
                }
                this.page--;
                console.log(this.page)
                this.GetSpecialList()
            },
            next:function () {
                this.page++;
                console.log(this.page)
                this.GetSpecialList()
            },
            SetPid:function (v) {
                console.log(v)
                this.pid = v.id;
                this.specialTicle = v.title
            },
            GetSpecialList: function () {
                var url="{:url('AdminSpecial/index')}"
                var that = this;
                $.post(url,{page:that.page},function (e) {
                    if(e.code ==200){
                        var data = e.list.data
                        that.list = data;
                        that.loading = false
                    }else {
                        error("某种错误");
                    }
                })
            },
            save: function () {
                var url="{:url('')}"
                var that = this;
                var data = {id:this.id,
                  pid:this.pid
                }
                $.post(url,data,function (e) {
                    if(e.code ==200){
                        success(e.msg);
                        var index = parent.layer.getFrameIndex(window.name);
                        setTimeout(function(){parent.layer.close(index)}, 2000);
                        //window.parent.location.reload();
                    }else {
                        error("某种错误");
                    }
                })
            },



        },
        mounted:function(){
            //页面挂载需要运行的函数
            this.GetSpecialList()
        }
    })
</script>